<template>
    <div class="all">
        <div class="bx">
            <div class="tag">
                <div>#助农专场</div>
                <div>#香糯黑玉米</div>
                <div>#撕丝牛肉</div>
                <div>#暖胃黄小米</div>
            </div>
            <div class="banner">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(v,index) in bannerArr" :key="index">
                        <img :src="v.img" alt="">
                    </van-swipe-item>         
                </van-swipe>
            </div>
            <div class="bImg">
                <img src="https://gw.alicdn.com/imgextra/i1/O1CN01piE6QE1pnztDwhrbG_!!6000000005406-2-tps-700-35.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"foodSwiper",
    data(){
        return{
            bannerArr:[]
        }   
    },
    mounted(){
        this.$http({
            url:`http://localhost:3000/localFood`,
            method:"get"
        }).then(res=>{
            this.bannerArr = res.data
        })
    }
}
</script>

<style lang="scss" scoped>
    .all {
        width: 100%;
        height: 3.39rem;
        background: linear-gradient(#46c23f,#f4f4f4);
    }
    .all .bx {
        width: 7.11rem;
        height: 100%;
        margin: auto;
    }
    .all .bx .tag {
        width: 100%;
        height: 0.8rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .all .bx .tag div {
        border-radius: 0.2rem;
        background: #4bb241;
        padding: 0 0.15rem;
        height: 0.47rem;
        line-height: 0.47rem;
        text-align: center;
        color: #fff;
    }
    .all .bx .banner {
        height: 2.02rem;
        border-radius: 0.24rem;
        overflow: hidden;
    }
    .all .bx .banner .van-swipe {
        width: 100%;
        height: 100%;
    }
    .all .bx .banner .van-swipe img {
        width: 100%;
        height: 100%;
    }
    .all .bx .bImg {
        width: 100%;
        height: 0.59rem;
        display: flex;
        align-items: center;
    }
    .all .bx .bImg img {
        width: 100%;
    }
</style>